<template>
  <div class="categories-layout">
    <main class="categories-main">
      <div class="categories-content">
        <!-- 面包屑导航 -->
        <a-breadcrumb class="breadcrumb">
          <a-breadcrumb-item>
            <router-link to="/">首页</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>分类列表</a-breadcrumb-item>
        </a-breadcrumb>

        <!-- 分类树 -->
        <a-card class="categories-card" :loading="loading">
          <template #title>
            <span class="card-title">
              <folder-outlined /> 文档分类
            </span>
          </template>
          <a-tree
            v-if="categoryTree.length"
            class="category-tree"
            :tree-data="categoryTree"
            :field-names="{
              title: 'title',
              key: 'id',
              children: 'children'
            }"
            :default-expanded-keys="expandedKeys"
            @select="handleCategorySelect"
          >
            <template #title="{ title, documents_count }">
              <span class="tree-node-title">
                {{ title }}
                <span class="document-count">{{ documents_count || 0 }} 篇</span>
              </span>
            </template>
          </a-tree>
          <a-empty v-else description="暂无分类" />
        </a-card>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { FolderOutlined } from '@ant-design/icons-vue'
import { getCategoryTree } from '@/api/category'

const router = useRouter()
const categoryTree = ref([])
const loading = ref(true)
const expandedKeys = ref([])

// 获取分类树
const fetchCategoryTree = async () => {
  loading.value = true
  try {
    const response = await getCategoryTree()
    categoryTree.value = response.data
    // 默认展开第一级分类
    expandedKeys.value = categoryTree.value.map(category => category.id)
  } catch (error) {
    message.error('获取分类树失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 处理分类选择
const handleCategorySelect = (selectedKeys, { node }) => {
  if (selectedKeys.length > 0) {
    router.push(`/category/${node.slug}`)
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchCategoryTree()
})
</script>

<style lang="scss" scoped>
.categories-layout {
  min-height: 100vh;
  padding: 24px;
  margin-top: 56px;
  background: var(--bg-color);
}

.categories-main {
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumb {
  margin-bottom: 24px;
}

.categories-card {
  border-radius: 8px;
  box-shadow: var(--card-shadow);

  .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
  }
}

.category-tree {
  :deep(.ant-tree-treenode) {
    padding: 4px 0;
  }

  :deep(.ant-tree-node-content-wrapper) {
    flex: 1;
  }
}

.tree-node-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 16px;

  .document-count {
    font-size: 12px;
    color: var(--text-color-secondary);
  }
}
</style> 